<template>
  <van-button v-if="value" type="info" round size="mini" :loading="isLoading" @click="changeFollowStatus">取消关注</van-button>
  <van-button v-else type="info" round icon="plus" size="small" :loading="isLoading" @click="changeFollowStatus">关注</van-button>
</template>

<script>
import { toFollow, cancelFollow } from '@/api/user.js'
export default {
  name: 'Follow',
  props: {
    authorId: {
      type: [String, Number, Object],
      default: null,
      required: true
    },
    // 关注状态
    value: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    async changeFollowStatus() {
      this.isLoading = true
      try {
        if (this.value) {
          // 已关注，要取消
          await cancelFollow(this.authorId)
          console.log(1);
        } else {
          // 未关注， 要关注
          await toFollow(this.authorId)
          console.log(2);
        }
        this.$emit('input', !this.value)
      } catch (err) {
        console.log(err)
        this.$toast.fail('操作失败')
      }
      this.isLoading = false
    }
  }
}
</script>

<style scope lang="less"></style>
